<template>
  <div>
    <VRow class="lf-config-row">
      <VCol cols="12">
        <VTextField
          v-model="appName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="请输入AppName"
          label="应用名称"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="title"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="请输入任务执行器名称"
          label="任务执行器名称"
        />
      </VCol>
      <VCol cols="12">
        <VRadioGroup
          v-model="addressType"
          inline
        >
          <template #label>
            <div>注册方式：</div>
          </template>
          <VRadio
            v-for="(n,i) in addressTypeOption"
            :key="i"
            :label="n.title"
            :value="n.value"
          />
        </VRadioGroup>
      </VCol>
      <VCol cols="12">
        <VTextarea
          v-model="addressList"
          class="lf-config-item"
          label="机器地址"
          clearable
          counter
          maxlength="255"
          :disabled="addressListDisabled"
          hint="请输入机器地址,多地址逗号分割"
        />
      </VCol>
    </VRow>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({		
  currRow: Object,
  addUrl: String,
  updateUrl: String,
  addressTypeOption: Array,
})

const emits = defineEmits(['refreshPage'])

const addUrl = ref(props.addUrl)
const updateUrl = ref(props.updateUrl)

const currRow = ref(props.currRow)
const addressTypeOption = reactive(props.addressTypeOption)
const row = currRow.value

const isEdit = ref(!!row.id)

const id = ref(row.id || '')
const appName = ref(row.appName || '')
const title = ref(row.title || '')
const addressType = ref(row.addressType || 0)
const addressList = ref(row.addressList || '')
const addressListDisabled = ref(addressType.value == 0 ? true : false)

const getUrl = () => {
  if(isEdit.value){
    return updateUrl.value
  }
  
  return addUrl.value
}

const saveItem = async () => {
  const res = await $ivyApi.post(getUrl(),{
    id: id.value,
    appName: appName.value,
    title: title.value,
    addressType: addressType.value,
    addressList: addressList.value,
  })

  emits('refreshPage', res)
}

watch(addressType, value => {
  addressListDisabled.value = value == 0 ? true : false
})


defineExpose({
  saveItem,
})

onMounted(() => {

})
</script>

<style scoped>
.lf-config-row .v-col {
  padding-block-end: 3px;
}

.lf-config-item {
  padding-block-start: 8px;
}
</style>
